<template>
  <div class="app-container">
  <el-card class="box-card">
      <el-form ref="form" :model="form">
        <el-descriptions title="个人基本信息" style="text-align: center" :column="3" border>

          <el-descriptions-item label="姓名" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.username }}
          </el-descriptions-item>

          <el-descriptions-item label="证件编号" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.certificateId }}
          </el-descriptions-item>

          <el-descriptions-item label="身份证号" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.idNumber}}
          </el-descriptions-item>

          <el-descriptions-item label="部门" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.dept.deptName}}
          </el-descriptions-item>
        </el-descriptions>

        <br/>
        <el-descriptions title="家庭成员信息" :column="3" border>
          <el-descriptions-item label="称谓" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.title }}
          </el-descriptions-item>

          <el-descriptions-item label="成员姓名" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.familyName }}
          </el-descriptions-item>



          <el-descriptions-item label="成员身份证号" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{form.familyIdNumber}}
          </el-descriptions-item>

          <el-descriptions-item label="成员年龄" label-class-name="my-label" :span="1" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.familyAge}}
          </el-descriptions-item>

          <el-descriptions-item label="成员政治面貌" label-class-name="my-label" :span="1" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.familyPolitics}}
          </el-descriptions-item>

          <el-descriptions-item label="成员电话" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.familyPhone}}
          </el-descriptions-item>


          <el-descriptions-item label="成员工作单位及职务" label-class-name="my-label" :span="1" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.familyOccupation}}
          </el-descriptions-item>

          <el-descriptions-item label="备注" label-class-name="my-label" :span="1" :contentStyle='contentStyle' :labelStyle="labelStyle">
            {{ form.remark}}
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
<br/>
      <div style="float:right; margin-bottom: 15px;">

        <el-button @click="viewCancel">返 回</el-button>
      </div>
  </el-card>
  </div>
</template>
<style>
  .img-box1 {
    white-space: pre-wrap;
    width: 90%;

    position: center;
    margin:20px auto;
  }
  .img-box1 img {
    width: 70%;

    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .imgpre{
    width:200px;
    height: 100px;


  }
  .ifr{
    width: 70%;
    height: 700px;

    position: relative;
    left: 50%;
    transform: translateX(-50% );
  }


  .input_text input.el-input__inner {
    border: none
  }

  input:disabled{

    background-color: #F5F5F5;

    color:#F5F5F5;
  }

</style>
<script>

  import {getToken} from "@/utils/auth";
  import {listFamily, getFamily, delFamily, addFamily, updateFamily} from "@/api/module/ls/family";

  export default {
    name: "BaseinfoDetail",
    components: {

    },
    dicts: ['yh_politics'],

    data() {
      return {
        contentStyle: {
          'width': '180px',
        },
        //label样式
        labelStyle: {
          'width': '140px',
          'color': '#000000',
          'text-align': 'right',
        },
        form:{
          username: null,
          certificateId: null,
          idNumber: null,
          deptid: null,
          title: null,
          familyName: null,
          familyIdNumber: null,
          familyAge: null,
          familyPolitics: null,
          familyOccupation: null,
          familyPhone: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          note1: null,
          note2: null,
          note3: null,
          note4: null,
          note5: null,
          note6: null,
          note7: null,
          note8: null,
          note9: null,
          note10: null
        },
        // 选中选项卡的 name
        //activeName: "columnInfo",

        // 表格的高度
        tableHeight: document.documentElement.scrollHeight - 245 + "px",
        // 表信息
        tables: [],
        // 表列信息
        columns: [],
        // 字典信息
        dictOptions: [],
        // 菜单信息
        menus: [],
        // 表详细信息
        info: {note1:"",
          note2:""},
      // 查询参数
      queryParams: {
        pageNum: 1,
          pageSize: 10,
          title: undefined,
          operName: undefined,
          businessType: undefined,
          status: undefined
      }
      };
    },
    created() {

      const id = this.$route.query.id;
      if (id) {
        // 获取表详细信息

        getFamily(id).then(res => {

          this.form = res.data;

        });

      }

    },
    methods: {


      /** 关闭按钮 */
      viewCancel() {
        const id = this.$route.query.id;
        getFamily(id).then(response => {
          this.form = response.data;

        });
        const obj = { path: "/jiben/lsfamily", query: {id} };
        this.$tab.closeOpenPage(obj);
      }
    },

  };
</script>






